<template>
    <div style="padding: 20px">
        <div>
            <van-row type="flex" justify="space-between">
                <van-col span="6">
                    <router-link :to="{path:'/mine'}"><van-icon name="cross" class="back" /></router-link>
                </van-col>
                <van-col span="6"><span style="font-size: 20px">编辑资料</span></van-col>
                <van-col span="6" style="text-align: center"><span class="save" @click="save">保存</span></van-col>
            </van-row>
        </div>
        <div class="avatar">
            <van-image
                    round
                    width="10rem"
                    height="10rem"
                   :src="$store.state.userInfo.avatar"
            />
            <input type="file" @change="change" ref="avater" value="hahah" class="changeAvatar">
        </div>
        <div class="contentlist">
            <van-field v-model="$store.state.userInfo.loginName" label="账号："  class="inputbox" type="text" disabled/>
            <van-field v-model="$store.state.userInfo.userName" label="昵称："  class="inputbox"/>
            <van-field v-model="$store.state.userInfo.phonenumber" label="手机号："  class="inputbox" disabled />
            <van-field v-model="$store.state.userInfo.sex" label="性别："  class="inputbox"/>
            <van-field v-model="$store.state.userInfo.remark" label="简介："  class="inputbox"/>
        </div>
    </div>
</template>

<script>
    import {getinformain, setAvatar, setInfo} from "../api/api";
    import {Dialog, Toast} from "vant";

    export default {
        name: "Info",
        data(){
            return{

            }
        },
        methods:{
            change(){
                const changeToast = Toast.loading({
                    duration:0,
                    message: '修改中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                setAvatar(this.$refs.avater.files[0]).then(res=>{

                    console.log(res)
                    getinformain().then(res=>{
                        console.log(res)
                        if(res.data.code==0){
                            this.$store.commit("changeUserInfo",{userInfo:res.data.data})
                            changeToast.clear()
                            Toast.success('修改成功');
                        }
                    })
                })
            },
            save(){
                const saveToast = Toast.loading({
                    duration:0,
                    message: '修改中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                setInfo(this.$store.state.userInfo.userName,this.$store.state.userInfo.sex,this.$store.state.userInfo.remark).then(res => {
                    console.log(res)
                    if(res.data.code==0){
                        getinformain().then(innerRes => {
                            console.log(innerRes.data)
                            this.$store.commit("changeUserInfo",{userInfo:innerRes.data.data})
                        })
                        Dialog.alert({
                            message:'保存成功!',
                            theme: 'round-button',
                        }).then(() => {
                        });
                        saveToast.clear()
                        Toast.success('修改成功');
                        this.$router.push('/mine')
                    }
                })
            }
        },
        mounted() {
            //获取个人信息
            getinformain().then(res=>{
                console.log(res)
                if(res.data.code==0){
                    this.$store.commit("changeUserInfo",{userInfo:res.data.data})
                    if(this.$store.state.userInfo.sex == 1){
                        this.sex =  "男"
                    }else{
                        this.sex =  "女"
                    }

                }
            })

        },
        created() {

            this.$store.dispatch("asyncChangeLogin");
        }
    }
</script>

<style scoped>

    .back {
        font-size: 30px;
    }
    .save {
        color: blue;
        font-size: 20px;
    }
    .avatar {
        position: relative;
        padding-top: 15px;
        width: 100%;
        /*height: 100px;*/
        /*border: 1px solid red;*/
        text-align: center;
    }
    .changeAvatar{
        border-radius: 50px;
        opacity: 0;
        position: absolute;
        display: block;
        width: 160px;
        height: 160px;
        top: 14px;
        left: 106px;
    }
    .contentlist {
        margin-top: 40px;
    }
    .inputbox {
        margin-bottom: 20px;
        font-size: 20px;
    }

</style>